import { memo } from "react";
import ReactMarkdown, { Options } from "react-markdown";

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yDark  } from 'react-syntax-highlighter/dist/esm/styles/prism';
import remarkGfm from "remark-gfm";

function Markdown({children , className = "" ,...props} : Options) {
    return <ReactMarkdown 
     remarkPlugins={[remarkGfm]}
     components={{
        // 代码高亮、链接等
        code({node, inline, className, children, ...props}) {
            const match = /language-(\w+)/.exec(className || '')
            return !inline  ? (
                <SyntaxHighlighter
                    children={String(children).replace(/\n$/, '')}
                    style={a11yDark}
                    language={match?.[1] ?? ""}
                    PreTag="div"
                    {...props}
                />
            ) : (
                <code className={className} {...props}>
                    {children}
                </code>
            )
        },
     }}
    {...props}
    >{children}</ReactMarkdown>
}
export default memo(Markdown)